<template>
    <backgound-image-vue
        width="750rpx"
        height="950rpx"
        src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/crm/6d7e68bc-6eeb-4c3a-8c4a-4318d3654b7f.png"
    />
    <view class="container">
        <navigation-custom-title-vue :back="false" title="客户管理" />
        <view class="container-box">
            <view class="tab">
                <tab-vue
                    :list="[{ title: '已投保客户' }, { title: '未投保客户' }]"
                    :active="type"
                    @change="onTab"
                />
            </view>
            <view class="search-box">
                <icon type="search" class="search-icon" size="16" />
                <input
                    class="search-input"
                    @confirm="onSearch"
                    placeholder-class="plach"
                    placeholder="请输入企业名称"
                />
                <view class="order" @click="onOrder">
                    {{ sortText }}
                    <view class="triangle" />
                </view>
            </view>
            <view class="customers">
                <view
                    v-for="(item, index) in clientList"
                    :key="index"
                    class="customer"
                    @click="onCustomer(item.client_id)"
                >
                    <view class="customer-head row">
                        <view class="customer-title">{{ item.name }}</view>
                        <view class="red">¥{{ item.balance }}</view>
                    </view>
                    <view class="customer-msg grey">
                        <view class="customer-msg-row"
                            >在保人数： {{ item.active_num }}人</view
                        >
                        <view class="customer-msg-row"
                            >开户时间： {{ item.create_time }}</view
                        >
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import backgoundImageVue from '@/components/background-image/backgound-image.vue'
import navigationCustomTitleVue from '@/components/navigation-custom-title/navigation-custom-title.vue'
import tabVue from '@/components/tab/tab.vue'
import { ClientDto, getClient } from '@/api/client'
import { onReachBottom } from '@dcloudio/uni-app'

const type = ref(0 as 0 | 1)
const sortText = ref('默认排序')
const clientList = ref([] as ClientDto[])

let sort = ''
let order = ''
let search = ''
let page = 1

const onCustomer = (id: number) => {
    uni.navigateTo({
        url: '/pages/company/index?id=' + id
    })
}
const onTab = (index: 0 | 1) => {
    type.value = index
    clientList.value = []
    page = 1
    getData()
}
const onSearch = (event: { detail: { value: string } }) => {
    search = event.detail.value
    clientList.value = []
    page = 1
    getData()
}
const onOrder = async () => {
    const result = await uni.showActionSheet({
        itemList: [
            '默认排序',
            '时间排序',
            '余额从低到高',
            '余额从高到低',
            '在保人数从少到多',
            '在保人数从多到少'
        ]
    })
    const index = ((result as unknown) as { tapIndex: number }).tapIndex
    const sortType = [
        '默认排序',
        '时间排序',
        '余额排序',
        '余额排序',
        '在保人数',
        '在保人数'
    ]
    const sortValue = ['', '', 'balance', 'balance', 'person', 'person']
    const descValue = ['', '', 'asc', 'desc', 'asc', 'desc']
    sortText.value = sortType[index]
    sort = sortValue[index]
    order = descValue[index]
    clientList.value = []
    page = 1
    getData()
}
const getData = async () => {
    const data = await getClient({
        page,
        isActive: Number(!type.value) as 0 | 1,
        sort,
        order,
        search
    })
    clientList.value.push(...data.data)
}
onReachBottom(() => {
    page += 1
    getData()
})
;(() => {
    getData()
})()
</script>
<style lang="scss" scoped>
.container {
    @include padding(0 0 60rpx 0);
    min-height: 100vh;
    overflow: auto;
    background-color: linear-gradient(
        180deg,
        #f4fff0 0%,
        #f4ffef 50%,
        #ffffff 100%
    );
    position: relative;
    z-index: 5;
}
.container-box {
    width: 702rpx;
    min-height: 100vh;
    background: #ffffff;
    border-radius: $uni-border-radius-base;
    margin: 30rpx auto 0;
}
.tab {
    padding: 0 26rpx;
}
.search-box {
    padding: 0 26rpx;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 30rpx;
}
.search-input {
    width: 489rpx;
    height: 88rpx;
    background: #f7f9fa;
    border-radius: 12rpx;
    font-size: $uni-font-size-lg;
    padding-left: 60rpx;
    box-sizing: border-box;
}
.search-icon {
    position: absolute;
    left: 44rpx;
    top: 29rpx;
}
.plach {
    color: $uni-text-color-grey;
}
.order {
    color: $uni-text-color-grey;
    margin-left: 30rpx;
}
.triangle {
    border-color: $uni-text-color-grey transparent transparent transparent;
}
</style>
